<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
            nodeType nodeName nodeValue
    元素节点    1       标签名      null
    属性节点    2       属性名      属性值
    文本节点    3       #text      文本内容

    获取节点：
    childNodes 获取某个节点下所有的子一级节点
    children   获取某一个节点下所有子一级级诶单
    attrtbutes 获取某一个元素节点的属性节点

    带element 不包含空白
    不带element 包含空白
    firstChild 获取某个节点的子一级的 第一个节点 #text
    firstElementChild 获取某个节点的子一级的 第一个节点 拿到元素本身 <p>你好</p>
    lastChild 获取某一个节点下子一级的 最后一个
    lastElementChild 获取某一个节点下子一级的 最后一个
    previousElementSibling 获取某一个节点上一个兄弟节点
    previousSibling 获取某一个节点上一个兄弟节点
    nextElementSibling 获取某一个节点上一个兄弟节点
    parentNode 获取某一个节点的父节点

    <div>
        <p>你好</p>
    </div>
    <script>
        // var box=document.querySelector('div');
        // console.log(box.firstChild);
    </script>

    操作dom节点
    创建，添加，删除，克隆，替换
    <script>
        var odiv=document.createElement('div');
        console.log(odiv);
        var odiv1=document.createTextNode('我是一个文本节点');
        console.log(odiv1);
        document.body.appendChild(odiv)
    </script>
    createElement创建元素节点
    createTextNode创建文本节点
    appendChild():向一个元素的节点末尾追加一个节点
    语法：父.appendChild(要插入的子节点)

    insertBefore():向某一个节点前插入一个节点
    语法:父.insertBefore(要插入的节点,插入到在哪一个节点的前面)

    removeChild():删除某一个节点下的某一个节点
    语法:父.removeChild(要删除的节点)

    replaceChild():将页面某一个节点替换
    语法:父.replaceChild(新节点,旧节点);

    cloneNode():复制一个节点
    语法:元素对象.cloneNode(true);



    获取css的属性值:
    获取盒模型的尺寸:(盒子的宽高+border+padding)
    offsetWidth.offsetHeight
    offsetLeft.offsetTop...获取元素相对于可视区区域位置号
    offsetparent获取元素定位的父级

    getComputedStyle:获取任意的css属性
    <script>
        var box=document.querySelector('div');
        console.log(window.getComputedStyle(box).width);
        console.log(window.getComputedStyle(box)[font-size]);
        console.log(window.getComputedStyle(box).fontSize);
        console.log(box.style.width);
    </script>

    操作元素的类名的属性词
    classList :记录了该元素所有的类名
    add方法:向元素追加类名
    remove方法:向元素中删除指定的类名
    toggle方法:切换类名,类名存在就删除,不存在则添加
    contain方法:判断里面有没有该类,返回布尔值
    

</body>
</html>